<template>
  <div class="app-container">
    <FilterSearch class="filter-search" :value="queryParams" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }"
      :config="configData" labelWidth="90px" position="right"></FilterSearch>
    <div class="main">
      <div class="table">
        <el-table @selection-change="tableChange" :data="tableData.rows" border v-loading="tableData.loading"
          style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="importID">
          </el-table-column>
          <el-table-column prop="id" label="id">
          </el-table-column>
          <el-table-column prop="name" label="名称">
          </el-table-column>
          <el-table-column prop="sex" label="性别">
          </el-table-column>
          <el-table-column prop="hobby" label="爱好">
          </el-table-column>
          <el-table-column prop="class" label="类">
          </el-table-column>
          <el-table-column prop="tel" label="手机号">
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template v-slot="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination  @current-change="currentChange" layout="total, prev, pager, next, jumper" :total="tableData.total"
          :current-page="queryParams.currentPage" :page-size="queryParams.size">
        </el-pagination>
      </div>
    </div>
    <el-dialog v-model="rowData.diaVis" title="创建原始数据" :close-on-click-modal="false" 
      :show-close="false" width="45%">
      <div class="box-container">
        <el-form label-width="120px">
          <el-form-item label="请定义任务名称:" prop="sqlName">
            <el-input v-model="rowData.formInline.sqlName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="请选择算法模型:" prop="sqlName">
            <el-select v-model="rowData.formInline.database">
              <el-option>
                1
              </el-option>
              <el-option>
                2
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="执行开始时间:" prop="sqlName">
            <el-input v-model="rowData.formInline.sqlName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="执行时长:" prop="sqlName">
            <el-input v-model="rowData.formInline.sqlName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="执行结束时间:" prop="sqlName">
            <el-input v-model="rowData.formInline.sqlName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="执行间隔时间:" prop="sqlName">
            <el-input v-model="rowData.formInline.sqlName" placeholder="请输入" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="rowData.diaVis = false">取消</el-button>
          <el-button type="primary" @click="submit">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { ref, reactive, computed, onBeforeMount } from "vue"
export default {
  setup() {
    const { proxy } = getCurrentInstance();

    const tableData = reactive({
      rows: [
        {
          id: 1,
          name: '特试探试探洒水大大声',
          sex: "sdasdasdasdasdasdd",
          hobby: "企鹅额企鹅额亲亲",
          class: "qweqeqeqeqwqeqweqwe",
          tel: 13333333333,
          address: "qeqeqeqeqeqewq",
          createTime: "2023/11/04 15:08:09"
        },
        {
          id: 2,
          name: '特试探试探洒水大大声',
          sex: "sdasdasdasdasdasdd",
          hobby: "企鹅额企鹅额亲亲",
          class: "qweqeqeqeqwqeqweqwe",
          tel: 13333333333,
          address: "qeqeqeqeqeqewq",
          createTime: "2023/11/04 15:08:09"
        },
        {
          id: 3,
          name: '特试探试探洒水大大声',
          sex: "sdasdasdasdasdasdd",
          hobby: "企鹅额企鹅额亲亲",
          class: "qweqeqeqeqwqeqweqwe",
          tel: 13333333333,
          address: "qeqeqeqeqeqewq",
          createTime: "2023/11/04 15:08:09"
        }
      ],
      total: 0,
      loading: false,
      selection:[]
    });

    const queryParams = ref({
      pageNum: 1,
      pageSize: 10
    });

    const configData = computed(() => {
      let config = {
        itemConfig: [
        ],
        operate: [
          {
            icon: "Plus",
            type: "primary",
            name: "新增",
            handleClick: insert,
            rule: true,
          },
          {
            icon: "Delete",
            type: "primary",
            name: "批量删除",
            handleClick: allDel,
            rule: true,
          }
        ],
        rules: {},
      };
      return config;
    })

    const rowData = reactive({
      diaVis: false,
      formInline: {}
    })

    const currentChange = (currentPage) => {
      proxy.queryParams.currentPage = currentPage;
      getList();
    }
    const tableChange = (selection) => {
      proxy.tableData.selection = selection;
    }
    const getList = () => {

    }
    const insert = () => {
      proxy.rowData.diaVis = true;
    }
    const submit = () => {

    }
    const allDel = () => {
      console.log("批量删除");
    }
    return {
      queryParams, configData, rowData, tableData, currentChange, tableChange, submit
    }
  }
}


</script>
<style lang="scss" scoped>
$border-color: #c1c5cd;

.box-container {
  .el-select {
    width: 100%;
  }

  .el-form {
    width: 100%;
  }
}
</style>